import React, { PureComponent } from 'react'
import { Toast } from 'antd-mobile'
import HouseItem from '../../components/HouseItem'
import NavHeader from '../../components/NavHeader'
import NoHouse from '../../components/NoHouse'
import './index.less'

export default class Favorites extends PureComponent {
  state = {
    houselist: [],
    // 是否加载中
    isLoading:false,
  }

  componentDidMount() {
    this.getFavorites();
  }

  // 发送请求获取收藏列表数据
  async getFavorites() {
    try {
      this.setState({
        isLoading:true,
      });
      // 开启loading
      Toast.loading('加载中...', 0, null, false);
      const res = await this.$axios("get", "/user/favorites");
      Toast.hide();
      // console.log('res: ', res);
      this.setState({
        houselist: res.body,
        isLoading:false,
      });
    } catch (error) {
      Toast.hide();
    }
  }

  // 渲染房屋列表项
  renderHouseList = (house) => {
    return (
      <HouseItem
        key={house.houseCode}
        onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}
        // 注意：该组件中应该接收 style，然后给组件元素设置样式！！！
        src={this.baseUrl + house.houseImg}
        style={{paddingLeft:"15px"}}
        title={house.title}
        desc={house.desc}
        tags={house.tags}
        price={house.price}
      />
    )
  }

  render() {
    const {houselist,isLoading}=this.state;
    return (
      <div className="favorites">
        {/* 顶部导航 */}
        <NavHeader>我的收藏</NavHeader>

        <div className="houselist">
          {
            isLoading?"":houselist.length>0?houselist.map(item =>
              this.renderHouseList(item)
            ):<NoHouse>暂无收藏房源</NoHouse>
          }
        </div>
      </div>
    )
  }
}
